<div class="row justify-content-center">
    <div class="col-8">
        <form name="editForm" role="form" novalidate (ngSubmit)="save()" #editForm="ngForm">
            <h2 id="jhi-banner-heading" jhiTranslate="husenApp.banner.home.createOrEditLabel">Create or edit a Banner</h2>
            <div>
                <jhi-alert-error></jhi-alert-error>
                <div class="form-group" [hidden]="!banner.id">
                    <label for="id" jhiTranslate="global.field.id">ID</label>
                    <input type="text" class="form-control" id="id" name="id"
                        [(ngModel)]="banner.id" readonly />
                </div>
                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="husenApp.banner.name" for="field_name">Name</label>
                    <input type="text" class="form-control" name="name" id="field_name"
                        [(ngModel)]="banner.name" />
                </div>
                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="husenApp.banner.appid" for="field_appid">Appid</label>
                    <input type="text" class="form-control" name="appid" id="field_appid"
                        [(ngModel)]="banner.appid" />
                </div>
                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="husenApp.banner.openid" for="field_openid">Openid</label>
                    <input type="text" class="form-control" name="openid" id="field_openid"
                        [(ngModel)]="banner.openid" />
                </div>
                <div class="form-group"  [hidden]=true >
                    <label class="form-control-label" jhiTranslate="husenApp.banner.picUrl" for="field_picUrl">Pic Url</label>
                    <input type="text" class="form-control" name="picUrl" id="field_picUrl"
                        [(ngModel)]="banner.picUrl" />
                </div>
                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="husenApp.banner.businessId" for="field_businessId">Business Id</label>
                    <input type="number" class="form-control" name="businessId" id="field_businessId"
                        [(ngModel)]="banner.businessId" />
                </div>
                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="husenApp.banner.type" for="field_type">Type</label>
                    <select class="form-control" name="type" [(ngModel)]="banner.type" id="field_type" >
                        <option value="HOME">{{'husenApp.BannerType.HOME' | translate}}</option>
                        <option value="MENU">{{'husenApp.BannerType.MENU' | translate}}</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="husenApp.banner.pic" for="field_pic">Pic</label>
                    <div>
                        <img [src]="'data:' + banner.picContentType + ';base64,' + banner.pic" style="max-height: 100px;" *ngIf="banner.pic" alt="banner image"/>
                        <div *ngIf="banner.pic" class="form-text text-danger clearfix">
                            <span class="pull-left">{{banner.picContentType}}, {{byteSize(banner.pic)}}</span>
                            <button type="button" (click)="clearInputImage('pic', 'picContentType', 'fileImage')" class="btn btn-secondary btn-xs pull-right">
                                <fa-icon [icon]="'times'"></fa-icon>
                            </button>
                        </div>
                        <input type="file" id="file_pic" (change)="setFileData($event, banner, 'pic', true)" accept="image/*" jhiTranslate="entity.action.addimage"/>
                    </div>
                    <input type="hidden" class="form-control" name="pic" id="field_pic"
                        [(ngModel)]="banner.pic" />
                    <input type="hidden" class="form-control" name="picContentType" id="field_picContentType"
                        [(ngModel)]="banner.picContentType" />
                </div>

                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="husenApp.banner.shop" for="field_shop">Shop</label>
                    <select class="form-control" id="field_shop" name="shop" [(ngModel)]="banner.shopId" >
                        <option [ngValue]="null"></option>
                        <option [ngValue]="shopOption.id" *ngFor="let shopOption of shops; trackBy: trackShopById">{{shopOption.id}}</option>
                    </select>
                </div>
            </div>
            <div>
                <button type="button" id="cancel-save" class="btn btn-secondary"  (click)="previousState()">
                    <fa-icon [icon]="'ban'"></fa-icon>&nbsp;<span jhiTranslate="entity.action.cancel">Cancel</span>
                </button>
                <button type="submit" id="save-entity" [disabled]="editForm.form.invalid || isSaving" class="btn btn-primary">
                    <fa-icon [icon]="'save'"></fa-icon>&nbsp;<span jhiTranslate="entity.action.save">Save</span>
                </button>
            </div>
        </form>
    </div>
</div>
